Thư viện hình ảnh Flex Panels

1.400 lượt xem;

style.css
project /

1 @import url('https://fonts.googleapis.com/css?family=Amatic+SC');
2 *{
3   margin: 0;
4   padding: 0;
5 }
6 body{
7   font-family: 'Amatic SC', cursive;
8 }
9 .panels{
10   min-height: 100vh;
11   overflow: hidden;
12   display: flex;
13 }
14 .panel{
15   transition:0.5s ease-in;
16   background:#6B0F9C;
17   text-align: center;
18   align-items: center;
19   color: white;
20   font-size: 20px;
21   background-position: center;
22   flex: 1;
23   display: flex;
24   flex-direction: column;
25   justify-content: center;
26   align-items: center;
27 }
28 .panel > * {
29   margin: 0;
30   width: 100%;
31   transition: transform 0.5s;
32   /* border:1px solid red; */
33   display: flex;
34   justify-content: center;
35   flex:1 0 auto;
36   justify-content: center;
37   align-items: center;
38 }
39 .panel p{
40   text-shadow: 0 0 4px solid black;
41   text-transform: uppercase;
42   font-size: 2em;
43 }
44 .panel p:nth-child(2) {
45   font-size: 4em;
46 }
47 .panel *:first-child{
48   transform: translateY(-100%);
49 }
50 .panel *:last-child{
51   transform: translateY(100%);
52 }
53 .panel.open-active *:first-child{
54   transform: translateY(0);
55 }
56 .panel.open-active *:last-child{
57   transform: translateY(0);
58 }
59 .panel.open{
60   font-size: 40px;
61   flex: 5;
62 }
63 .panel1{
64   background-image: url(https://source.unsplash.com/collection/190727/1500x1500);
65 }
66 .panel2{
67   background-image: url(https://source.unsplash.com/collection/190727/1500x1500);
68 }
69 .panel3{
70   background-image: url(https://source.unsplash.com/collection/190727/1500x1500);
71 }
72 .panel4{
73   background-image: url(https://source.unsplash.com/collection/190727/1500x1500);
74 }
75 .panel5{
76   background-image: url(https://source.unsplash.com/collection/190727/1500x1500);
77 }